<template>
  <div class="movie-admin-header">
    <div class="search-container">
      <el-input placeholder="输入查询内容" v-model="content" @keyup.enter.native="searchUser">
        <el-button slot="append" icon="search" @click="searchUser"></el-button>
      </el-input>
    </div>
      <user-admin-tag v-for="(user,idx) in userList" :user="user" :key="idx"/>
  </div>
</template>

<script>
import userAdminTag from './common/userAdminTag'
export default {
  data () {
    return {
      content: ''
    }
  },
  components: {
    userAdminTag
  },
  methods: {
    searchUser () {
      if (this.content === '') {
        this.$store.dispatch('findAllUsers')
        return
      }
      this.$store.commit('SEARCH_TEXT', {searchText: this.content})
      this.$store.dispatch('getSearchList')
      this.$store.commit('SEARCH_LOADING', {loading: true})
    }
  },
  computed: {
    userList () {
      return this.$store.getters.userList
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "../../style/color";
.movie-admin-header{
  width: 950px;
  margin: 0 auto;
  height: 75px;
  text-align: center;
  .search-container{
    display: inline-block;
    line-height: 75px;
    vertical-align: top;
    width: 500px;
    margin-left: 50px;
    input{
      height: 34px;
    }
  }
  .add-class{
    margin-top: 20px;
    display: inline-block;
  }
}

</style>
